<template>
  <scroll-view scroll-y class="scroll_box">
    <view class="cateGoryBox">
      <navigator
        class="image_text_box"
        v-for="(item, index) in cateGoryList"
        :key="index"
        :url="`/pages/categoryDetails/index?id=${item.id}`"
      >
        <view class="image_box">
          <image :src="item.cover" mode="aspectFill" />
        </view>
        <view class="text_box">{{ item.name }}</view>
      </navigator>
    </view>
  </scroll-view>
</template>

<script>
export default {
  data() {
    return {
      cateGoryList: [],
    };
  },
  mounted() {
    uni.setNavigationBarTitle({
      title: "分类",
    });
    this.getList();
  },
  methods: {
    getList() {
      this.request({
        url: "http://157.122.54.189:9088/image/v1/vertical/category",
      }).then((res) => {
        this.cateGoryList = res.data.res.category;
        console.log(this.cateGoryList);
      });
    },
  },
};
</script>

<style lang="scss" scope>
.scroll_box {
  height: calc(100vh - 46px);
}
.cateGoryBox {
  display: flex;
  flex-wrap: wrap;
  .image_text_box {
    width: 33.33%;
    border: 2px solid #fff;
    position: relative;
    .image_box {
      image {
        height: 120px;
      }
    }
    .text_box {
      position: absolute;
      color: #fff;
      left: 0;
      bottom: 0;
      background-image: linear-gradient(
        to right top,
        rgba(0, 0, 0, 0.2),
        rgba(0, 0, 0, 0)
      );
      height: 25px;
      font-size: 16px;
      font-weight: 600;
      display: flex;
      justify-content: left;
      padding-left: 20rpx;
      align-items: center;
      width: 100%;
    }
  }
}
</style>
